<template>
  <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
    <view class="container">
      <view class="title">
        <image src="@/static/images/proceeds/icon.png" mode=""></image>
        <view>微信收款</view>
      </view>
      <view class="money">
        <mrdotyan-count-to :endVal="redPackage" :decimals="2" :duration='1500' :text-style="state.textStyle" />
        <view class="yuan">元</view>
      </view>
      <view class="line"></view>
      <view class="sk">
        <view>收款账户</view>
        <view>{{userInfo.nickName}}</view>
      </view>
      <view class="container_">
        <uni-steps :options="options" :active-icon="activeIcon" :active="active" direction="column"></uni-steps>
      </view>
    </view>
    <view class="chose" @click="close"></view>
  </uni-popup>
</template>

<script setup>
  import { ref, watch, reactive } from "vue"
  const props = defineProps({
    redPackage: {
      type: Number,
      default: function () {
        return 0
      }
    }
  })
  // 数字滚动组件样式
  const state = reactive({
    textStyle: {
      fontSize: '45rpx',
      fontWeight: 'bold',
      color: '#000000'
    }
  })

  let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  let popup = ref(null)
  let active = ref(0) //状态
  let activeIcon = ref('spinner-cycle') //状态icon
  let options = ref([
    { title: '' },
    { title: '提现中...' },
    { title: '提现成功,请留意微信到账通知' }
  ])

  // 改变active状态
  const changeActive = (newVal) => {
		options.value[0].title = newVal + '元'
    setTimeout(() => {
      active.value = 1
      setTimeout(() => {
        active.value = 2
        activeIcon.value = 'checkbox'
      }, 1500)
    }, 1000)
  }

  watch(() => props.redPackage,(newVal, oldVal) => {
      changeActive(newVal)
    }
  )

  const close = () => {
    setTimeout(() => {
      active.value = 0
      activeIcon.value = 'spinner-cycle'
    }, 200)
		popup.value.close()
  }
  defineExpose({
    popup,
  })
</script>

<style lang="scss" scoped>
  .container {
    width: 576rpx;
    height: 660rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    position: relative;
    padding: 50rpx;
    display: flex;
    flex-direction: column;

    .title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 34rpx;
        height: 30rpx;
        margin-right: 10rpx;
        flex-shrink: 0;
      }

      view {
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .money {
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-top: 30rpx;

      .yuan {
        font-size: 24rpx;
        margin-left: 5rpx;
        line-height: 40rpx;
        font-weight: 600;
      }
    }

    .line {
      width: 100%;
      height: 2px;
      background-color: #e2e2e2;
      margin-top: 40rpx;
    }

    .sk {
      color: #727272;
      font-size: 24rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
    }

    .container_ {
      width: 100%;
      // height: 198rpx;
      background-color: #f6f6f6;
      border-radius: 5rpx;
      margin-top: 40rpx;
      padding: 25rpx;
    }

  }

  .chose {
    width: 50rpx;
    height: 50rpx;
    background: center/100% 100% url(@/static/images/redPacket/×.png);
    margin: 0 auto;
    margin-top: 30rpx;
  }
</style>